<template>
   <div class="all-wrapper">
       <div class="dian"><img src="../assets/头部.png"></div>
       <div class="heng">
        <span><img src="../assets/小于号.png" class="span-img" @click="back()"></span>
         <div class="menu-input">
			<input class="menu_search" placeholder="请输入商品名称" />
            <img src="../assets/搜索.png">
		</div>
       </div>
       <div class="shop">
            <div class="shop-img"><img src="../assets/woerma.png"></div>
            <div class="shop-word">
                <P class="shop-word-p1">沃尔玛</P>
                <P class="shop-word-p2">
                <span>月售1万+</span>
                <span>起送￥0</span>
                <span>基础运费￥5</span>
                </P>
                <P class="shop-word-p3">VIP尊享满89元减4元运费券</P>
            </div> 
       </div>
       <div class="list">
        <div class="list-left">
            <el-menu
              default-active="1"
              class="el-menu"
              :collapse="isColllapse"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
              <router-link to="/a">
                <el-menu-item>
                    <span>全部商品</span>
                </el-menu-item>
              </router-link>
              <router-link to="/b">
                <el-menu-item>
                    <span>秒杀</span>
                </el-menu-item>
              </router-link>
              <router-link to="/c">
                <el-menu-item>
                    <span>新鲜水果</span>
                </el-menu-item>
              </router-link>
              <router-link to="/d">
                <el-menu-item>
                    <span>休闲食品</span>
                </el-menu-item>
              </router-link>
              <router-link to="/e">
                <el-menu-item>
                    <span>时令蔬菜</span>
                </el-menu-item>
              </router-link>
              <router-link to="/f">
                <el-menu-item>
                    <span>肉蛋家禽</span>
                </el-menu-item>
              </router-link>
            </el-menu>
        </div>
        <div class="list-right">
            <router-view></router-view>
        </div>
       </div>
   </div>
</template>

<script>

export default {
    
    methods:{
        back(){
             console.log("跳转至首页")
            this.$router.push('/home')
        }
    },
    data() {
        return {
         isColllapse:false
        }
    } 
}
</script>
<style lang="css" scoped>
.all-wrapper{
  width: 100vw;
  min-height:100vh ;
 
}
.dian{
  width: 100%;
  height: 5vw;
  top: 0;
}
.dian img{
  width: 100%;
  height: 5vw;
}
.heng{
width: 100vw;
height: 12vw;
display: flex;
font-size: 4vw;
line-height: 12vw;
}
.heng span{
    margin-left: 3vw;
    margin-top: 2vw;
}
.span-img{
    width: 7vw;
    height: 7vw;
}
.menu-input {
 margin-left: 5vw;
 margin-top: 0vw;
 position: relative;
}
.menu_search {
 width: 77vw;
 height: 8vw;
 background-color: #f5f5f5;
 border: none;
 border-radius: 10vw;
}

input::-ms-input-placeholder {
 text-align: center;
}

input::-webkit-input-placeholder {
 text-align: center;
}
.menu-input img{
  width: 6vw;
  height: 6vw;
  margin-left: -75vw;
  margin-top:3vw ;
  position: absolute;
}
.shop{
  width: 90vw;
  height: 25vw;
  margin: 3vw auto 4vw auto;
  display: flex;
  justify-content: space-between;
  /* margin-bottom: 4vw; */
  /* border: 1px solid red; */
}
.shop-img{
  width: 20vw;
  height: 20vw;
}
.shop-img img{
   width: 20vw;
  height: 20vw;
}
.shop-word{
  width: 65vw;
  height: 25vw;
  border-bottom: 1px solid #c1c0c9;
  line-height: 4vw;
}
.shop-word p{
  margin-top: 0vw;
}
.shop-word-p1{
  font-size: 5.5vw;
  font-weight: 600;
}
.shop-word-p2{
  display: flex;
  justify-content: space-between;
}
.shop-word-p3{
  color: red;
}
.list{
    width: 100vw;
    height: 100vw;
    display: flex;
    
}
.list-left{
    width: 20vw;
    height: 80vw;

}
.list-right{
    width: 70vw;
    height: 110vw;
    margin-left: 5vw;

}
</style>